@()(implicit session: Session)
@config.main("Search") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Search")

            <div class="main-body">

                @components.navUlComponents(
                    Seq(("geneId", "Search By Gene ID", searchForm("Gene ID", "ids", "geneIdForm")),
                        ("range", "Search By Range", rangeForm),
                    ), "geneId")


                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.table()

                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {


                formValidation()
                getChr()

                let columns = getTableColumns(genomeHeader,"table")


                $('#table').bootstrapTable({
                    columns:columns
                });
                let hide = ["go"]

                hide.forEach(v => {
                    $('#table').bootstrapTable('hideColumn', v);
                    $("input:checkbox[value=" + v + "]").attr("checked", false)
                })

            })

            function getEg(name) {
                const species = $("#species").val();
                $.post("/COADB/example/getGeneIdsExample/" +species,(data)=>{
                    $(`#${name}ids`).val(data)
                })
            }

            function getStart() {
                $("#start").val("1")
            }

            function getEnd() {
                $("#end").val("2000000")
            }

            function getChr() {
                let species =  $("#speciesRange").val()
                $.post("/COADB/search/getChr?species=" + species, (data) => {
                    $("#chr").empty().select2({data:data})
                })
            }

            function Search(formId) {
                let form = $("#" + formId)
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "/COADB/search/getSearchData?formId=" + formId,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            $("#table").bootstrapTable("load", data);
                            let $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    })
                }
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }
                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }
                $('#geneIdForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });
                $('#rangeForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: integer,
                        end: integer
                    }
                });

            }

    </script>
}

@searchForm(title: String, name: String, formId: String) = {
    <form class="registration-form col-sm-12 my-form" id="@formId">


        @components.species()


        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">@title :</label>
            <div class="col-sm-9">
                <textarea class="form-control" type="text" rows="5" name="@name" id="@{
                    formId + name
                }"></textarea>
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEg('@formId')"><em class="egCrics">Example</em></a></span>
            </div>
        </div>

        @components.button(formId)
    </form>
}

@rangeForm = {
    <form class="registration-form col-sm-12 my-form" id="rangeForm">


        @components.species( id = "speciesRange",onchange = "getChr()")


        @components.chr()

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">Start Position:</label>
            <div class="col-sm-5" style="text-align: left">
                <input class="form-control" name="start" id="start">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span >
                    e.g.,&nbsp;<a href="#" onclick="getStart()"><em class="egCrics">1</em></a></span>
            </div>

        </div>

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">End Position:</label>
            <div class="col-sm-5" style="text-align: left">
                <input class="form-control" name="end" id="end">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span  >
                    e.g.,&nbsp;<a href="#" onclick="getEnd()"><em class="egCrics">2000000</em></a></span>
            </div>
        </div>

        @components.button("rangeForm")
    </form>
}
